<template>
  <div>
    <div class="real_cont">
      <div class="real_time_slctel">
        <div class="real_time_slctel_left">
          <el-select
            v-model="formInline.line"
            style="width: 140px; height: 40px"
            placeholder="线体选项"
          >
            <el-option
              v-for="item in lineList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>

          <el-select
            v-model="formInline.step"
            style="width: 140px; height: 40px"
            placeholder="站点选项"
          >
            <el-option
              v-for="item in RecipeList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>

          <el-button
            type="primary"
            size="mini"
            style="height: 40px"
            @click="getlistclick"
            >更新</el-button
          >
          <!-- <el-select
            v-model="value2"
            multiple
            collapse-tags
            @change="oncheng"
            :multiple-limit="this.limit"
            style="margin-left: 20px; width: 160px"
            placeholder="人员系列"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select> -->
        </div>
        <div class="real_time_slctel_right">
          <div></div>
          <div></div>
          <div class="el-icon-s-home conthome"></div>
        </div>
      </div>

      <div class="real_hader">
        <div class="real_hader_title">
          <svg
            width="100%"
            height="75"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            preserveAspectRatio="xMinYMin meet"
          >
            <g stroke="block" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Group-6" transform="translate(398.000000, -23.000000)">
                <text class="svg_text" :x="this.x" :y="this.y">
                  缺陷趋势看板
                </text>
                <image
                  id="未标题-4"
                  x="28"
                  y="9"
                  width="568"
                  height="131"
                  xlink:href=""
                ></image>
                <polygon
                  id="Stroke-1"
                  stroke="#5BD1FB"
                  stroke-width="2"
                  opacity="0.4"
                  points="0 0 100 98 665 98 765 0"
                ></polygon>
                <polyline
                  id="Path-4"
                  stroke="#5BD1FB"
                  stroke-width="4"
                  stroke-linecap="round"
                  points="83 81 101.24847 98.167538 121.346043 98.167538"
                ></polyline>
                <polyline
                  id="Path-4-Copy"
                  stroke="#5BD1FB"
                  stroke-width="4"
                  stroke-linecap="round"
                  transform="translate(663.173022, 89.583769) scale(-1, 1) translate(-663.173022, -89.583769) "
                  points="644 81 662.24847 98.167538 682.346043 98.167538"
                ></polyline>
              </g>
              <g
                xmlns="http://www.w3.org/2000/svg"
                stroke="#5BD1FB"
                stroke-width="2"
                opacity="0.4"
                fill="none"
              >
                <!-- <path d="" /> -->
                <!-- <path class="path1" d="M0.5 0.5L39.5 39.5 L607.5 39.5 L568.5 0.5Z" /> -->
                <!-- <path d="M1352.5 0.5L1313.5 39.5L1881.5 39.5L1919.5 0.5Z" /> -->
              </g>
            </g>
          </svg>
        </div>
        <div class="real_hader_bar">
          <div id="real_bar_box">
            <!-- <svg
                        id="initsvg"
                        width="100%"
                        height="100%"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                        <defs>
                        <polygon
                            id="path-1"
                            points="10.3227985 0 0 10.33453 0 951.108815 1842.75574 951.108815 1858.97728 936.344727 1858.97728 10.33453 171.074573 10.33453 159.275983 0"
                        ></polygon>
                        <filter
                            x="-0.9%"
                            y="-1.8%"
                            width="101.8%"
                            height="103.6%"
                            filterUnits="objectBoundingBox"
                            id="filter-2"
                        >
                            <feGaussianBlur
                            stdDeviation="16"
                            in="SourceAlpha"
                            result="shadowBlurInner1"
                            ></feGaussianBlur>
                            <feOffset
                            dx="0"
                            dy="0"
                            in="shadowBlurInner1"
                            result="shadowOffsetInner1"
                            ></feOffset>
                            <feComposite
                            in="shadowOffsetInner1"
                            in2="SourceAlpha"
                            operator="arithmetic"
                            k2="-1"
                            k3="1"
                            result="shadowInnerInner1"
                            ></feComposite>
                            <feColorMatrix
                            values="0 0 0 0 0.356862745   0 0 0 0 0.819607843   0 0 0 0 0.984313725  0 0 0 0.4 0"
                            type="matrix"
                            in="shadowInnerInner1"
                            ></feColorMatrix>
                        </filter>
                        <polygon
                            id="path-3"
                            points="1264.30051 108 1297.45015 163 1889.3123 163 1889.3123 108"
                        ></polygon>
                        <filter
                            x="-2.7%"
                            y="-30.9%"
                            width="105.4%"
                            height="161.8%"
                            filterUnits="objectBoundingBox"
                            id="filter-4"
                        >
                            <feGaussianBlur
                            stdDeviation="16"
                            in="SourceAlpha"
                            result="shadowBlurInner1"
                            ></feGaussianBlur>
                            <feOffset
                            dx="0"
                            dy="0"
                            in="shadowBlurInner1"
                            result="shadowOffsetInner1"
                            ></feOffset>
                            <feComposite
                            in="shadowOffsetInner1"
                            in2="SourceAlpha"
                            operator="arithmetic"
                            k2="-1"
                            k3="1"
                            result="shadowInnerInner1"
                            ></feComposite>
                            <feColorMatrix
                            values="0 0 0 0 0.356862745   0 0 0 0 0.819607843   0 0 0 0 0.984313725  0 0 0 0.4 0"
                            type="matrix"
                            in="shadowInnerInner1"
                            ></feColorMatrix>
                        </filter>
                        </defs>
                        <g
                        id="B11总经理看板-Copy-9"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                        >
                        <rect fill="#0A0D42" x="0" y="0" width="1920" height="1080"></rect>

                        <g id="Group-2-Copy" transform="translate(1, 1)">
                            <g id="Fill-1-Copy-19">
                            <use
                                fill="black"
                                fill-opacity="1"
                                filter="url(#filter-2)"
                                xlink:href="#path-1"
                            ></use>
                            <use
                                stroke-opacity="0.4"
                                stroke="#5BD1FB"
                                stroke-width="2"
                                xlink:href="#path-1"
                            ></use>
                            </g>
                            <path
                            d="M140.86784,4.42402827 L148.446883,11.0600707 L163.608286,11.0600707 L156.028137,4.42402827 L140.86784,4.42402827 Z M119.074774,4.42402827 L126.654923,11.0600707 L141.81522,11.0600707 L134.235072,4.42402827 L119.074774,4.42402827 Z M97.2806026,4.42402827 L104.860751,11.0600707 L120.021049,11.0600707 L112.4409,4.42402827 L97.2806026,4.42402827 Z"
                            id="Fill-1-Copy-5"
                            fill-opacity="0.4"
                            fill="#5BD1FB"
                            ></path>
                            <polyline
                            id="Stroke-1-Copy-5"
                            stroke="#5BD1FB"
                            stroke-width="2"
                            points="0 28.7561837 0 11.0600707 11.0546139 0 159.186441 0 171.346516 11.0600707"
                            ></polyline>
                            <polyline
                            id="Stroke-1-Copy-13"
                            stroke="#5BD1FB"
                            stroke-width="2"
                            points="1814 951.526502 1843.84746 951.526502 1859.32392 937.14841 1859.32392 873"
                            ></polyline>
                        </g>
                        </g>
                           </svg> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 290,
      y: 65,
      limit: 4,
      lineList: [],
      RecipeList: [],
      formInline: {
        line: "",
        step: "",
      },
      xAis: ["21", "22"],
      options: [],
      value2: [],
      deflist: [],
      resxAis: [],
      resline:[],
      redsdeflist: [],
      line: [],
      Timerequest: null,
    };
  },
  mounted() {
    this.realclick();

    // this.reaitimrclick()
  },
  methods: {
    oncheng() {
      console.log(this.value2);
    },
    //获取 站点 线体
    realclick() {
      this.ajax
        .get(
          `prod/1011?line=${this.formInline.line}&step=${this.formInline.step}`
        )
        .then((res) => {
          // console.log(res.data);
          this.lineList = res.data.line;
          this.RecipeList = res.data.site;
        });
    },

    //定时请求方法
    tiemreqEst() {
      this.ajax
        .get(
          `prod/1018?line=${this.formInline.line}&site=${this.formInline.site}`
        )
        .then((res) => {
          console.log(res.data);
            // if(res.data){
              // var char_1 = this.$echarts.init(document.getElementById("real_bar_box"));
              // char_1.dispose();
              // this.reaitimrclick();
              this.redsdeflist = res.data.def;
              this.resxAis = res.data.xAis;
              this.resline = res.data.per;
            // }
        });
    },

    getlistclick() {
      this.ajax
        .get(
          `prod/1018?line=${this.formInline.line}&step=${this.formInline.step}`
        )
        .then((res) => {
          console.log(res.data);
          this.deflist = res.data.def;
          this.xAis = res.data.xAis;
          this.line = res.data.per;
          if (this.deflist) {
            var char_1 = this.$echarts.init(document.getElementById("real_bar_box"));
            char_1.dispose();
            this.reaitimrclick();
          }
        });
    },

    reaitimrclick() {
      let query_barey = this.$echarts.init(
        document.getElementById("real_bar_box")
      );
      var list = [];
      var datalist = [];
      var lineList = [];
      var Bardata = this.deflist   
      // barlist = this.deflist;
      for (let i = 0; i < this.deflist.length; i++) {
        datalist.push(this.deflist[i].val);
      }

      for (let i = 0; i < this.line.length; i++) {
        lineList.push(this.line[i].val);
      }
      this.deflist.forEach((ele) => {
        list.push(
          {
            //   tooltip:{
            //   trigger: "axis",
            //   axisPointer: {
            //     // 坐标轴指示器，坐标轴触发有效
            //     type: "shadow", // 默认为直线，可选为：'line' | 'shadow  axis'
            //   },
            //   position: function (point, params, dom, rect, size) {
            //     // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            //     // 提示框位置
            //     var x = 0; // x坐标位置
            //     var y = 0; // y坐标位置

            //     // 当前鼠标位置
            //     var pointX = point[0];
            //     var pointY = point[1];

            //     // 外层div大小
            //     // var viewWidth = size.viewSize[0];
            //     // var viewHeight = size.viewSize[1];

            //     // 提示框大小
            //     var boxWidth = size.contentSize[0];
            //     var boxHeight = size.contentSize[1];

            //     // boxWidth > pointX 说明鼠标左边放不下提示框
            //     if (boxWidth > pointX) {
            //       x = 5;
            //     } else {
            //       // 左边放的下
            //       x = pointX - boxWidth;
            //     }

            //     // boxHeight > pointY 说明鼠标上边放不下提示框
            //     if (boxHeight > pointY) {
            //       y = 5;
            //     } else {
            //       // 上边放得下
            //       y = pointY - boxHeight;
            //     }

            //     return [x, y];
            //   },
            //   formatter: function (parmas) {
            //     console.log(parmas)
            //     return ele.val[parmas.dataIndex].text;
            //   },
            // },
            name: ele.key,
            data: ele.val.map((item) => {
              return item.val;
            }),
            type: "bar",
            stack: "a",
            barWidth: 0,
            label: {
              show: true,
              formatter: function (parmas) {
                return ele.val[parmas.dataIndex].text;
              },
            },
          },
          {
            name:"缺陷占比",
            type: "line",
            // stack: "1",
            data: lineList,
            yAxisIndex: 1,
            label: {
              normal: {
                show: true,
                position: "insideRight",
                //  formatter: "{a} <br/>{b}:({c}%)",
                formatter: function (params) {
                  //标签内容
                  return params.value + "%";
                },
              },
            },
          }
        );
      });
      
      var option = {
        title: {
          text: "缺陷趋势统计",
          left: "center",
          y: "0%",
          textStyle: {
            fontWeight: 300,
            color: "#ffffff",
          },
          subtext: "TOP1-TOP2-TOP3-TOP4-TOP5-TOP6-TOP7-TOP8-TOP9-TOP10",
          subtextStyle: {
            fontWeight: 200,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "item",
             formatter:function(params){
                for(let i=0; i<Bardata.length; i++){
                  for(let j=0;j<Bardata[i].val.length;j++){
                    if(Bardata[i].val[j].val == params.value){
                       return Bardata[i].val[j].text
                    }
                  }
              }
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow  axis'
          },
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
        },

        legend: {
          data: this.xAis,
        },
        grid: {
          left: "5%",
          right: "7%",
          bottom: "2%",
          height: 450,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          data: this.xAis,
        },
        // dataZoom: [
        //   {
        //     type: "slider",
        //     show: true,
        //     start: 0,
        //     end: 100,
        //     handleSize: 8,
        //   },
        //   {
        //     type: "inside",
        //     start: 0,
        //     end: 100,
        //   },
        //   {
        //     type: "slider",
        //     show: true,
        //     yAxisIndex: 0,
        //     filterMode: "empty",
        //     width: 12,
        //     height: "70%",
        //     handleSize: 8,
        //     showDataShadow: false,
        //     left: "93%",
        //   },
        // ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            // data:list1,
          },
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 50,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],

        series: list,
      };
      query_barey.setOption(option, true);

      this.Timerequest = setInterval(() => {
        this.tiemreqEst();
        list = [];
        lineList = [];
        this.deflist = [];
        setTimeout(() => {
          // console.log('111111111111111111111',this.redsdeflist);
          // console.log('22222222222222222222', this.resxAis)
          this.xAis = this.resxAis;
           for (let i = 0; i < this.resline.length; i++) {
              lineList.push(this.resline[i].val);
            }
          this.redsdeflist.forEach((ele) => {
            list.push(
                 {
                  name: ele.key,
                  data: ele.val.map((item) => {
                    return item.val;
                  }),
                  type: "bar",
                  stack: "a",
                  barWidth: 0,
                  label: {
                    show: true,
                    formatter: function (parmas) {
                      return ele.val[parmas.dataIndex].text;
                    },
                  },
                },
                    {
                      name:"缺陷占比",
                      type: "line",
                      // stack: "1",
                      data: lineList,
                      yAxisIndex: 1,
                      label: {
                        normal: {
                          show: true,
                          position: "insideRight",
                          //  formatter: "{a} <br/>{b}:({c}%)",
                          formatter: function (params) {
                            //标签内容
                            return params.value + "%";
                          },
                        },
                      },
                   }
            );
          });
          //    var option = {
          query_barey.setOption({
            xAxis: {
              type: "category",
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              data: this.xAis,
            },
            series: list,
          });
          // }
          console.log("更新完成");
        }, 4000);
      }, 300000);
      query_barey.setOption(option, true);
      window.addEventListener("resize", function () {
        query_barey.resize();
      });
    },

    linton() {
      let chart = this.$echarts.init(document.getElementById("real_bar_box"));
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            symbolSize: 24,
            symbol:
              "path://M140.86784,4.42402827 L148.446883,11.0600707 L163.608286,11.0600707 L156.028137,4.42402827 L140.86784,4.42402827 Z M119.074774,4.42402827 L126.654923,11.0600707 L141.81522,11.0600707 L134.235072,4.42402827 L119.074774,4.42402827 Z M97.2806026,4.42402827 L104.860751,11.0600707 L120.021049,11.0600707 L112.4409,4.42402827 L97.2806026,4.42402827 Z",
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style  scoped>
.real_cont {
  width: 100%;
  height: 100%;
  /* border: 1px solid red; */
}
.real_time_slctel {
  width: 100%;
  /* border: 1px red solid; */
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 0px 0px 0.5px gainsboro;
}
.real_time_slctel_left {
  width: 60%;
  /* border: 1px solid #000; */
  display: flex;
}
.real_time_slctel_right {
  width: 30%;
  /* border: 1px solid #000; */
  display: flex;
  justify-content: space-between;
}
.real_hader {
  width: 100%;
  /* margin: 20px auto; */
  background: #09163d;
  margin: 30px auto; /*水平居中*/
  position: absolute; /*设置position属性*
  /* position: absolute;
  transform:translate(0%,0%); */
}
.real_hader_title {
  width: 100%;
}
.svg_text {
  font-size: 24px;
  fill: #ffffff;
}
.conthome {
  font-size: 40px;
}
.real_hader_bar {
  width: 100%;
  /* border: 1px solid blue; */
  /* margin-bottom: 30px; */
}
#real_bar_box {
  width: 90%;
  height: 70vh;
  /* border: 1px solid red; */
  margin: 20px auto;
  margin-bottom: 30px;
  /* box-shadow: 0px 0px 0px 1px gainsboro; */
}

@media screen and (min-width: 1920px) {
  #Group-6 {
    transform: translate(577px, -23px);
  }
  .real_hader {
    width: 100%;
    margin: 30px auto;
    /* border: 1px solid yellow; */
    background: #09163d;
    position: absolute;
  }
  #real_bar_box {
    width: 80%;
    height: 70vh;
    /* border: 1px solid red; */
    margin: 20px auto;
    margin-bottom: 70px;
    box-shadow: 0px 0px 0px 1px gainsboro;
  }
}
</style>